<style scoped>
.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);
  margin-bottom: 20px;
}
</style>

<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-card class="box-card" v-if="crud.optPageShow.listPage">
        <div slot="header" class="clearfix">
          <span>调度中心列表</span>
        </div>
        <!--工具栏-->
        <div class="head-container">
          <crudOperation :permission="permission"/>
        </div>
        <!--表格渲染-->
        <el-table ref="table" :data="crud.data" v-loading="crud.loading"
                  @select="crud.selectChange" @select-all="crud.selectAllChange"
                  @selection-change="crud.selectionChangeHandler"
                  @filter-change="crud.handleFilterChange"
                  @cell-mouse-enter="crud.showTooltip"
                  @cell-mouse-leave="crud.hideTooltip"
                  @row-dblclick="toDetail"
                  :header-cell-style="{ background: 'rgba(52, 125, 225, 0.1)', color: '#404248' }" border stripe>
          <el-table-column type="selection"/>
          <el-table-column v-if="columns.visible('centerCode')" :show-overflow-tooltip="true" prop="centerCode"
                           label="中心编码"/>
          <el-table-column v-if="columns.visible('centerName')" :show-overflow-tooltip="true" prop="centerName"
                           label="中心名称"/>
          <el-table-column v-if="columns.visible('centerIp')" prop="centerIp" label="IP"/>
          <el-table-column v-if="columns.visible('centerPort')" prop="centerPort" label="端口" width="120"/>
          <el-table-column v-if="columns.visible('centerStatus')" prop="centerStatus" label="状态 " width="120"
                           :filters="centerStatusDict"
                           key="centerStatus"
                           filter-placement="bottom-end" :filter-multiple="false" column-key="centerStatus">
            <template slot-scope="scope">
              <el-tag size="medium" :type="centerStatusFormatterType(scope.row.centerStatus)">
                {{ centerStatusFormatter(scope.row.centerStatus) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column v-if="columns.visible('isMaster')" prop="isMaster" label="是否Master " min-width="100"
                           :filters="isMasterStatusDict" width="120"
                           key="isMaster"
                           filter-placement="bottom-end" :filter-multiple="false" column-key="isMaster">
            <template slot-scope="scope">
              <el-tag size="medium" :type="isMasterStatusFormatterType(scope.row.isMaster)">
                {{ isMasterStatusFormatter(scope.row.isMaster) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column v-if="columns.visible('validAgentNum')" prop="validAgentNum" width="120" label="有效节点数量"/>
          <el-table-column v-if="columns.visible('upTs')" :show-overflow-tooltip="true" label="更新时间" width="160"
                           prop="upTs">
            <template slot-scope="scope">
              <!-- 悬浮提示 -->
              <el-tooltip
                placement="bottom-end"
                v-model="scope.row.showTooltip"
                :open-delay="500"
                effect="light"
                :disabled="!scope.row.showTooltip"
              >
                <div slot="content">双击当前行展示详情</div>
                <div>
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{ scope.row.upTs }}</span>
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <view-logs-online v-if="crud.optPageShow.detailPage" :center-info="centerInfo"/>
    </div>
  </div>
</template>
<script>
import centerApi from '@/api/center/center_conf'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import crudOperation from '@crud/extend/center/CRUD.operation'
import viewLogsOnline from './view-logs-online'

//默认去查询
const queryList = [
  {'cloumValue': 'centerCode', 'cloumName': '中心编码'},
  {'cloumValue': 'centerName', 'cloumName': '中心名称'},
  {'cloumValue': 'centerIp', 'cloumName': 'IP'}]

const defaultCrud = CRUD({
  title: '中心管理',
  url: '/api/centerDef/selectPages',
  queryList: queryList,
  sort: 'sort,asc',
  crudMethod: {...centerApi}
})

const defaultForm = {
  pkId: null,
  centerCode: null,
  centerName: null,
  centerIp: null,
  centerPort: 80,
  centerStatus: "sleep",
  serverVs: null,
  isMaster: '1',
  centerGroup: null,
  upTs: null,
  validAgentNum: null
}

export default {
  name: 'center',
  components: {crudOperation, viewLogsOnline},
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  dicts: ['center_status', 'is_master'],
  data() {
    return {
      permission: {
        del: ['center:del']
      },
      centerInfo: null,
      centerDict: [],
      centerStatusDict: [],
      isMasterDict: [],
      isMasterStatusDict: []
    }

  },
  computed: {},
  created() {
    this.crud.optPageShow.listPage = true
    this.crud.optPageShow.detailPage = false
    this.centerDict = this.dict.center_status;
    this.isMasterDict = this.dict.is_master;
  },
  watch: {
    centerDict() {
      this.$nextTick(() => {
        this.centerDict.forEach(item => {
          var obj = {
            text: item.label,
            value: item.value
          }
          this.centerStatusDict.push(obj);
        })
      })
    },
    isMasterDict() {
      this.$nextTick(() => {
        this.isMasterDict.forEach(item => {
          var obj = {
            text: item.label,
            value: item.value
          }
          this.isMasterStatusDict.push(obj);
        })
      })
    }
  },
  methods: {
    toDetail(row, column, event){
      this.centerInfo = row;
      this.crud.toDetail();
    },
    centerStatusFormatterType(val) {
      const type = ['primary', 'success', 'info', 'warning', 'danger']
      return type[val]
    },
    centerStatusFormatter(val) {
      return this.dict.label.center_status[val]
    },
    isMasterStatusFormatterType(val) {
      const type = ['primary', 'success', 'info', 'warning', 'danger']
      return type[val]
    },
    isMasterStatusFormatter(val) {
      return this.dict.label.is_master[val]
    }
  }
}
</script>
